<template>
  <div class="app-container">
    <el-container style="height: 760px; border: 1px solid #eee">
      <el-aside style="width: 460px;background-color: #ffffff">
        <div class="container" style="width: 100%;">
          <el-divider content-position="center">添加分类</el-divider>
          <el-form ref="addForm" :rules="rules" :model="addData" label-position="left" label-width="90px" style="padding-left: 10px; padding-top: 15px;">
            <el-form-item label="分类" size="mini" prop="pid">
              <el-select v-model="addData.pid" placeholder="请选择" style="width: 225px;">
                <el-option
                  :key="-1"
                  label="--- 顶级分类 ---"
                  value="-1">
                </el-option>
                <el-option
                  v-for="item in category_options"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="标识" size="mini" prop="slug" style="width: 315px;" >
              <el-input v-model="addData.slug" placeholder="字母,数字,下划线,-,2-24长度"/>
            </el-form-item>
            <el-form-item label="标题" size="mini" prop="title" style="width: 315px;" >
              <el-input v-model="addData.title" placeholder="标题用来显示"/>
            </el-form-item>
            <el-form-item label="排序" size="mini" prop="sort" style="width: 315px;" >
              <el-input v-model="addData.sort" placeholder="显示顺序, 从小到大"/>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="dialogFormVisible = false">
              Cancel
            </el-button>
            <el-button size="mini" type="primary" @click="handleAddSubmit()">
              提交
            </el-button>
          </div>
        </div>
      </el-aside>
      <el-main style="margin-right: 50px">
        <div class="filter-container">
          <el-form ref="queryForm" :model="listQuery" :rules="queryRules" label-position="left">
            <el-form-item label="" size="mini" prop="slug" style="float: left;">
              <el-input v-model="listQuery.slug" placeholder="请输入标识" class="filter-item" style="width: 120px;margin-right:5px;"></el-input>
            </el-form-item>
            <el-form-item label="" size="mini" prop="title" style="float: left;">
              <el-input v-model="listQuery.title" placeholder="请输入标题" class="filter-item" style="width: 120px;margin-right:5px;"></el-input>
            </el-form-item>
            <el-button v-waves size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="getList">查询</el-button>
            <el-button v-waves size="mini" class="filter-item" type="danger" @click="resetQueryForm('queryForm')">重置</el-button>
          </el-form>
        </div>
        <el-table v-loading="listLoading" size="small" :data="list" border highlight-current-row style="width: 100%">
          <el-table-column width="100px" align="center" label="ID">
            <template slot-scope="{row}">
              <span>{{ row.Id }}</span>
            </template>
          </el-table-column>
          <el-table-column width="100px" align="center" label="上级ID">
            <template slot-scope="{row}">
              <span>{{ row.Pid }}</span>
            </template>
          </el-table-column>
          <el-table-column width="240px" align="center" label="分类标题">
            <template slot-scope="{row}">
              <span>{{ row.Title }}</span>
            </template>
          </el-table-column>

          <el-table-column width="200px" align="center" label="分类Sign">
            <template slot-scope="{row}">
              <span>{{ row.Slug }}</span>
            </template>
          </el-table-column>

          <el-table-column width="150px" align="center" label="排序">
            <template slot-scope="{row}">
              <span>{{ row.Sort }}</span>
            </template>
          </el-table-column>

          <el-table-column width="150px" align="center" label="内容数量">
            <template slot-scope="{row}">
              <span>{{ row.NodeCount }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="{row}">
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="handleDel(row.Id)"
              >
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="+total > 0" :total="total" :page.sync="listQuery.page_index" :limit.sync="listQuery.page_size" @pagination="getList" style="padding-top: 2px" />
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { nodeCategoryList, nodeCategoryDetail, nodeCategoryDel, nodeCategoryAdd } from '@/api/node'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination/index'
import { delTreeEmptyChildren } from '@/utils/common'

export default {
  name: 'NodeCategoryList',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page_index: 1,
        page_size: 10,
        slug: ''
      },
      category_options: [],
      addData: {
        id: 0,
        title: '',
        slug: '',
        sort: '',
        pid: '-1'
      },
      queryRules: {
        title: [
          { required: false, message: '需要填写标题', trigger: 'blur' }
        ],
        slug: [
          { required: false, message: '需要填写标识符', trigger: 'blur' }
        ]
      },
      rules: {
        title: [
          { required: true, message: '需要填写标题', trigger: 'blur' },
          { min: 2, max: 32, message: '长度在 2 到 32 个字符之间', trigger: 'blur' }
        ],
        slug: [
          { pattern: /^(?!_)(?!.*?_$)[a-zA-Z0-9_/-]{2,24}$/, type: 'string', required: true, message: '标识符只能 [字母,数字,下划线,-], 2 - 24位', trigger: 'blur' }
        ],
        pid: [
          { required: true, message: '需要选择上级', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.total = 0
    this.resetQueryData()
    this.getList()
    this.getDetail(0)
  },
  methods: {
    resetAddData() {
      this.selected_editor_category_options = []
      this.addData = {
        id: 0,
        title: '',
        slug: '',
        sort: '',
        pid: '-1'
      }
    },
    resetQueryData() {
      this.listQuery = {
        page_index: 1,
        page_size: 10,
        slug: ''
      }
    },
    getList() {
      this.listLoading = true
      nodeCategoryList(this.listQuery).then(response => {
        if (response.success) {
          this.list = response.data.data
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
            this.getDetail(0)
          }, 200)
        } else {
          this.$message({
            type: 'error',
            message: response.msg
          })
          setTimeout(() => {
            this.listLoading = false
          }, 1 * 100)
        }
      })
    },
    getDetail(id) {
      this.resetAddData()
      nodeCategoryDetail(id).then((response) => {
        if (response.success) {
          this.category_options = response.data.category_options
        }
      }).catch(err => {
        this.$message({
          type: 'error',
          message: err
        })
      })
      this.$nextTick(() => {
        this.$refs['addForm'].clearValidate()
      })
    },
    handleAddSubmit() {
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          nodeCategoryAdd(this.addData).then((response) => {
            if (response.success) {
              this.$message({
                type: 'success',
                message: '添加成功!'
              })
              this.getList()
              this.getDetail()
              this.resetAddData()
            } else {
              this.$message({
                type: 'error',
                message: response.msg
              })
            }
          }).catch(err => {
            this.$message({
              type: 'error',
              message: err
            })
          })
        }
      })
    },
    handleDel(id) {
      this.$confirm('此操作将永久删除分类和下级分类,内容移动到默认分类下, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        nodeCategoryDel(id).then((response) => {
          if (response.success) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          } else {
            this.$message({
              type: 'error',
              message: response.msg
            })
          }
        }).catch(err => {
          this.$message({
            type: 'success',
            message: err
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    editorSelectChange(item) {
      if (item !== '' && this.editor_category_options[item].length > 0) {
        this.selected_editor_category_options = delTreeEmptyChildren(this.editor_category_options[item])
      } else {
        this.selected_editor_category_options = []
      }
    },
    handleCategoryChange(item) {
      if (item.length > 0) {
        this.addData.pid = item[item.length - 1]
      }
    },
    resetQueryForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
